import React, { useState,useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Tabs } from 'antd-mobile'
import { Toast, NavBar } from "react-vant";
import { ShareO } from "@react-vant/icons";
import style from "./index.module.css";
import axios from "axios";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [yptablist, setYptablist] = useState([])
  const [yptabIndex, setYptabIndex] = useState(0)
  const render=()=>{
    axios.get('/api/yptablist').then((resp)=>{
      console.log(resp.data.yptablist)
      setYptablist(resp.data.yptablist)
    })
  }
  useEffect(()=>{
    render()
  },[])
  const tabyf=(index:number)=>{
    // console.log(index)
    setYptabIndex(index)
  }
  return (
    <div className="Medicationguidance">
      <div className={style.nav}>
        <NavBar
        title="自营药房——在家购药"
        onClickLeft={() => navigate(-1)}
        rightText={<ShareO fontSize={20} />}
        onClickRight={() => Toast("分享")}
      />
      </div>
      <div className={style.content}>
        <div className={style.top}>
          <img src="../../../src/assets/zxmy.png" />
        </div>
        <div className={style.zhong}>
          <img src="../../../src/assets/yfyht.png" />
        </div>
      </div>
      <div className={style.yp}>
         <div><img src='../../../src/assets/fkyy.png'/></div>
         <div><img src='../../../src/assets/nkyy.png'/></div>
         <div><img src='../../../src/assets/rkyy.png'/></div>
         <div><img src='../../../src/assets/pfyy.png'/></div>
         <div><img src='../../../src/assets/cwxh.png'/></div>
         <div><img src='../../../src/assets/gmfs.png'/></div>
         <div><img src='../../../src/assets/wgyy.png'/></div>
         <div><img src='../../../src/assets/zbtl.png'/></div>
      </div>
      <div>
         <div className={style.title}>
             {yptablist.length>0 && yptablist.map((item,index)=><div className={index==yptabIndex ? 'style.yptactive':''} onClick={()=>tabyf(index)}>{item.title}</div>)}
         </div>
         <div className={style.count}>
           {yptablist.length>0 && yptablist[yptabIndex].children.map((item,index)=><div>
            <div><img src={item.img}/></div>
            <div>{item.title}</div>
            <div><span>￥{item.xprice}</span><span><s>￥{item.yprice}</s></span></div>
            <div><button>购买</button></div>
           </div>)}
         </div>
      </div>
    </div>
  );
};

export default Index;
